<template>
	<view class="extract-record_wrapper">

		<view class="extract__list_record" v-if="sumCount != 0">
			<view class="content_item" v-for="item in extractRecordData.data" :key="item.id">
				<view class="item_number">
					<view class="item_title">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/wallet/withdraw.png"></image>
						<text>数额</text>
					</view>
					<text class="item_title--number">{{$util.roundNumber(item.amount,2)}}PCD</text>
				</view>
				<view class="item_date">
					<view class="item_title">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/wallet/submitDate.png"></image>
						<text>申请提交时间</text>
					</view>
					<text class="submit_date">{{$util.FormatDate(item.create_time)}}</text>
				</view>
				<view class="item_status">
					<view class="item_title">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/wallet/amount.png"></image>
						<text>状态</text>
					</view>
					<view class="status_handle">
						<text>{{$util.FormatStatus(item.status)}}</text>
						<text :class="{'status__btn_handle':true,'status__btn_disabled':item.status>=2}" @click="revokeExtract(item)">撤销</text>
					</view>
				</view>
				<view class="item_reason" v-if="item.remark">
					<text @click="onViewReason(item.remark)">点击查看原因</text>
				</view>
			</view>
			
			<view class="content_null" v-if="sumCount == 0">
				暂无记录
			</view>
			<!-- 上拉加载组件 -->
			<uLi-load-more status="loadMoreStatus"></uLi-load-more>
		</view>
		
		<!-- 驳回对话框 -->
		<view class="dialog_mask" v-if="showDialog">
			<view class="dialog_wrapper">
				<view class="dialog_title">温馨提示</view>
				<view class="dialog_content">
					<text>抱歉，您的申请被驳回</text>
					<text>{{rejectReason}}</text>
				</view>
				<button type="warn" class="dialog_btn" @click="onDialogConfirm">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uLiLoadMore from "@/components/uLi-load-more/uLi-load-more.vue"
	export default {
		data() {
			return {
				extractRecordData: {}, //锁仓数据
				showDialog: false,
				rejectReason: '', // 驳回原因
				currentPage: 1, // 当前页
				limitPage: 10, // 每页展示条数
				sumCount: 0, // 全部条数
				loadMoreStatus:"contentdown"
			}
		},
		computed: {
			sumPage() {
				let count = Math.ceil(this.extractRecordData.count / this.limitPage)
				return count === 0 ? 1 : count
			}
		},
		onReady() {
			this.extractRecord()
		},
		onPullDownRefresh() {
			this.extractRecord()
		},
		methods: {
			// 提币记录
			extractRecord() {
				this.loadMoreStatus = "contentrefresh"
				this.$api.extractRecord({
					limit: this.limitPage,
					page: this.currentPage
				}, res => {
					uni.stopPullDownRefresh()
					if (res.data.type == 'ok') {
						this.extractRecordData = res.data.message
						this.sumCount = res.data.message.count
						// 当前是最后一页
						if (this.currentPage >= Math.ceil(this.sumCount / this.limitPage)) {
							this.loadingType = "contentnomore"
						}else{
							this.loadingType = "contentdown"
							this.currentPage++
						}
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				})
			},

			// 撤销提币
			revokeExtract(item) {
				if (item.status > 1) {
					return
				}
				this.$api.revokeExtract({
					id: item.id
				}, res => {
					if (res.data.type == 'ok') {
						this.extractRecord()
					}
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
				})
			},

			// 对话框确定按钮
			onDialogConfirm() {
				this.showDialog = false
			},

			// 监听驳回原因
			onViewReason(rejectReason) {
				this.showDialog = true
				this.rejectReason = rejectReason
			}
		},
		components: {uLiLoadMore}
	}
</script>

<style lang="scss" scoped>
	.extract-record_wrapper {
		height: 100vh;
	}

	.extract__list_record {
		height: 100%;

		.content_item {
			width:92%;
			margin:0 auto 20upx auto;
			background-color:#FFFFFF;
			padding:0 40upx 0 19upx;
			box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.1);
			border-radius:10upx;
			box-sizing: border-box;
			.item_number,
			.item_date,
			.item_status {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100upx;
				font-size: 13px;

				.item_title {
					display: flex;
					align-items: center;

					image {
						width: 26upx;
						height: 26upx;
						margin-right: 10upx;
					}
				}

				.item_title--number {
					color: #E03E4D;
				}

				.submit_date {
					color: #999999;
				}

				.status_handle {
					color: #999999;

					.status__btn_handle {
						padding: 6upx 30upx;
						margin-left: 20upx;
						border-radius: 40upx;
						background-color: #E13E4D;
						color: #FFFFFF;
					}

					.status__btn_disabled {
						background-color: #999999;
					}
				}
			}

			.item_reason {
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					border-bottom: 1px solid #000000;
				}
			}
		}
		.content_item:first-child{
			margin-top:20upx;
		}
		.content_null {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 18px;
		}
	}

	.dialog_mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);

		.dialog_wrapper {
			width: 75%;
			background-color: #FFFFFF;

			.dialog_title {
				height: 100upx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #25263D;
				color: #FFFFFF;
				font-size: 14px;
			}

			.dialog_content {
				height: 200upx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;

				text:first-child {
					color: #E03E4D;
					font-size: 24px;
				}
			}

			.dialog_btn {
				width: 60%;
				height: 80upx;
				line-height: 80upx;
				margin: 20upx auto 40upx auto;
				border-radius: 80upx;
				background-color: #E03E4D;
			}
		}
	}
</style>
